<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用Canvas绘图</title>
</head>
<body>
    <canvas id="drawing" width="200" height="200">A drawing of something</canvas>
    <canvas id="drawingArc" width="200" height="200"></canvas>
    <script>
        var drawingArc = document.getElementById("drawingArc")
        if(drawingArc.getContext){
            var ctx = drawingArc.getContext('2d')
            // 绘制路径
            
            // 开始路径
            ctx.beginPath()

            // 绘制外圆
            ctx.arc(100, 100, 99, 0, 2*Math.PI, false)
            // 绘制内圆
            ctx.moveTo(194, 100)
            ctx.arc(100, 100, 94, 0, 2*Math.PI, false)
            // 绘制分针
            ctx.moveTo(100, 100)
            ctx.lineTo(100, 15)
            // 绘制时针
            ctx.moveTo(100, 100)
            ctx.lineTo(35, 100)

            // 描边路径
            ctx.stroke()
            
            // 绘制文字
            ctx.font = "bold 14px Arial";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle"
            ctx.fillText("12", 100, 15)
        }
    </script>
    <script>
        var drawing = document.getElementById("drawing")
        // 确定浏览器支持canvas
        if(drawing.getContext){
            var context = drawing.getContext('2d')
            // 填充和描边
            // context.strokeStyle = "red"
            // context.fillStyle = "#0000ff"

            // 绘制矩形 fillRect() fillStyle
            context.fillStyle = "#ff0000"
            context.fillRect(10, 10, 50, 50)
            
            context.fillStyle = "rgba(0,0,255, 0.5)"
            context.fillRect(20, 20, 50, 50)

            context.clearRect(30, 30, 10, 10)
            // 绘制绿色色描边矩形
            context.strokeStyle = "green"
            context.strokeRect(30, 30, 50, 50)
            // 取得图像的数据URI
            var imgURI = drawing.toDataURL('image/png')
            console.log(imgURI)

            // 显示图像
            var image = document.createElement('img')
            image.src = imgURI
            document.body.appendChild(image)
        }
    </script>
</body>
</html>